<template>
  <view class="repair-apply-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="navbar-left" @click="navigateBack">
        <view class="back-icon">
          <text class="icon-arrow-left">←</text>
        </view>
      </view>
      <view class="navbar-title">申请维修服务</view>
      <view class="navbar-right" @click="showHelpTips">
        <text class="icon-help">?</text>
      </view>
    </view>

    <!-- 进度指示器 -->
    <view class="progress-container">
      <view class="progress-steps">
        <view 
          v-for="(step, index) in steps" 
          :key="index"
          class="progress-step"
          :class="{ 
            completed: currentStep > index,
            active: currentStep === index 
          }"
        >
          <view class="step-icon">
            <text v-if="currentStep > index" class="icon-check">✓</text>
            <text v-else>{{ index + 1 }}</text>
          </view>
          <text class="step-text">{{ step }}</text>
          <view 
            class="step-line" 
            v-if="index < steps.length - 1"
            :class="{ completed: currentStep > index + 1 }"
          ></view>
        </view>
      </view>
    </view>

    <!-- 表单容器 -->
    <view class="form-card">
      <!-- 步骤容器 -->
      <view class="form-steps-container">
        <!-- 步骤1：设备信息 -->
        <view 
          class="form-step" 
          :style="{ 
            transform: `translateX(-${currentStep * 100}%)`,
            opacity: currentStep === 0 ? 1 : 0,
            transition: 'all 0.4s ease'
          }"
        >
          <view class="form-content">
            <view class="form-item">
              <view class="form-label">设备型号</view>
              <view class="form-control">
                <view 
                  class="select-input" 
                  @click="showModelSelect = true"
                >
                  <text v-if="deviceForm.model">{{ deviceForm.model }}</text>
                  <text v-else class="placeholder">请选择无人机型号</text>
                  <text class="select-arrow">▼</text>
                </view>
              </view>
            </view>
            
            <view class="form-item">
              <view class="form-label">购买时间</view>
              <view class="form-control">
                <view 
                  class="text-input" 
                  @click="showPurchaseDate = true"
                >
                  <text v-if="deviceForm.purchaseDate">{{ deviceForm.purchaseDate }}</text>
                  <text v-else class="placeholder">请选择购买日期</text>
                </view>
              </view>
            </view>
            
            <view class="form-item">
              <view class="form-label">是否在保</view>
              <view class="form-control radio-group">
                <label 
                  class="radio-item" 
                  :class="{ checked: deviceForm.inWarranty === 'true' }"
                  @click="deviceForm.inWarranty = 'true'"
                >
                  <view class="radio-circle"></view>
                  <text class="radio-text">是</text>
                </label>
                <label 
                  class="radio-item" 
                  :class="{ checked: deviceForm.inWarranty === 'false' }"
                  @click="deviceForm.inWarranty = 'false'"
                >
                  <view class="radio-circle"></view>
                  <text class="radio-text">否</text>
                </label>
              </view>
            </view>
            
            <view class="form-item">
              <view class="form-label">设备序列号</view>
              <view class="form-control">
                <input 
                  v-model="deviceForm.serialNumber" 
                  placeholder="请输入设备序列号（SN码）"
                  maxlength="20"
                  class="text-input"
                ></input>
              </view>
              <text class="form-hint">序列号通常位于电池仓或设备底部</text>
            </view>
          </view>
        </view>

        <!-- 步骤2：故障信息 -->
        <view 
          class="form-step" 
          :style="{ 
            transform: `translateX(-${currentStep * 100}%)`,
            opacity: currentStep === 1 ? 1 : 0,
            transition: 'all 0.4s ease'
          }"
        >
          <view class="form-content">
            <view class="form-item">
              <view class="form-label">故障类型</view>
              <view class="form-control checkbox-group">
                <view class="checkbox-grid">
                  <label 
                    v-for="type in faultTypes" 
                    :key="type.value"
                    class="checkbox-item"
                    :class="{ checked: faultForm.faultType.includes(type.value) }"
                    @click="toggleFaultType(type.value)"
                  >
                    <view class="checkbox-icon">
                      <text v-if="faultForm.faultType.includes(type.value)">✓</text>
                    </view>
                    <text class="checkbox-text">{{ type.label }}</text>
                  </label>
                </view>
              </view>
            </view>
            
            <view class="form-item">
              <view class="form-label">故障描述</view>
              <view class="form-control">
                <textarea 
                  v-model="faultForm.description" 
                  placeholder="请详细描述设备故障情况"
                  maxlength="200"
                  class="textarea-input"
                  rows="4"
                ></textarea>
                <text class="form-hint">{{ faultForm.description.length }}/200 字符</text>
              </view>
            </view>
            
            <view class="form-item">
              <view class="form-label">上传照片</view>
              <view class="form-control">
                <view class="upload-container">
                  <view 
                    class="upload-add" 
                    @click="chooseImage"
                    v-if="faultForm.images.length < 5"
                  >
                    <text class="upload-plus">+</text>
                  </view>
                  <view 
                    class="upload-item" 
                    v-for="(img, index) in faultForm.images" 
                    :key="index"
                  >
                    <image 
                      :src="img" 
                      mode="cover"
                      class="upload-img"
                    ></image>
                    <view 
                      class="upload-remove" 
                      @click="removeImage(index)"
                    >
                      <text>×</text>
                    </view>
                  </view>
                </view>
                <text class="form-hint">最多上传5张照片，清晰展示故障部位</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 步骤3：联系信息 -->
        <view 
          class="form-step" 
          :style="{ 
            transform: `translateX(-${currentStep * 100}%)`,
            opacity: currentStep === 2 ? 1 : 0,
            transition: 'all 0.4s ease'
          }"
        >
          <view class="form-content">
            <view class="form-item">
              <view class="form-label">联系人姓名</view>
              <view class="form-control">
                <input 
                  v-model="contactForm.name" 
                  placeholder="请输入您的姓名"
                  maxlength="10"
                  class="text-input"
                ></input>
              </view>
            </view>
            
            <view class="form-item">
              <view class="form-label">联系电话</view>
              <view class="form-control">
                <input 
                  v-model="contactForm.phone" 
                  placeholder="请输入手机号码"
                  type="number"
                  maxlength="11"
                  class="text-input"
                ></input>
              </view>
            </view>
            
            <view class="form-item">
              <view class="form-label">所在城市</view>
              <view class="form-control">
                <view 
                  class="select-input" 
                  @click="showCityPicker = true"
                >
                  <text v-if="contactForm.city">{{ contactForm.city }}</text>
                  <text v-else class="placeholder">请选择所在城市</text>
                  <text class="select-arrow">▼</text>
                </view>
              </view>
            </view>
            
            <view class="form-item">
              <view class="form-label">详细地址</view>
              <view class="form-control">
                <textarea 
                  v-model="contactForm.address" 
                  placeholder="请输入详细地址（用于寄修）"
                  maxlength="100"
                  class="textarea-input"
                  rows="3"
                ></textarea>
              </view>
            </view>
            
            <view class="form-item">
              <view class="form-label">服务方式</view>
              <view class="form-control radio-group">
                <label 
                  class="radio-item" 
                  :class="{ checked: contactForm.serviceType === 'mail' }"
                  @click="contactForm.serviceType = 'mail'"
                >
                  <view class="radio-circle"></view>
                  <text class="radio-text">邮寄维修</text>
                </label>
                <label 
                  class="radio-item" 
                  :class="{ checked: contactForm.serviceType === 'store' }"
                  @click="contactForm.serviceType = 'store'"
                >
                  <view class="radio-circle"></view>
                  <text class="radio-text">门店自送</text>
                </label>
              </view>
            </view>
          </view>
        </view>

        <!-- 提交成功 -->
        <view 
          class="form-step success-step" 
          :style="{ 
            transform: `translateX(-${currentStep * 100}%)`,
            opacity: currentStep === 3 ? 1 : 0,
            transition: 'all 0.4s ease'
          }"
        >
          <view class="success-icon">✓</view>
          <text class="success-title">申请提交成功！</text>
          <text class="success-desc">您的维修申请已受理，订单号：{{ orderNumber }}</text>
          <text class="success-info">我们将在24小时内与您联系，请注意接听电话</text>
          <view class="success-buttons">
            <button 
              class="success-btn primary"
              @click="navigateToHome"
            >
              返回首页
            </button>
            <button 
              class="success-btn secondary"
              @click="navigateToOrder"
            >
              查看我的订单
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="form-actions" v-if="currentStep < 3">
      <button 
        v-if="currentStep > 0"
        class="action-btn prev-btn"
        @click="prevStep"
      >
        上一步
      </button>
      <button 
        class="action-btn next-btn"
        @click="nextStep"
      >
        {{ currentStep === 2 ? '提交申请' : '下一步' }}
      </button>
    </view>

    <!-- 型号选择弹窗 -->
    <view class="modal-overlay" v-if="showModelSelect" @click="showModelSelect = false">
      <view class="modal-dialog" @click.stop>
        <view class="modal-title">选择设备型号</view>
        <view class="modal-content">
          <view 
            class="modal-item"
            v-for="model in deviceModels"
            :key="model.value"
            @click="selectModel(model)"
          >
            {{ model.label }}
          </view>
        </view>
      </view>
    </view>

    <!-- 日期选择弹窗 -->
    <view class="modal-overlay" v-if="showPurchaseDate" @click="showPurchaseDate = false">
      <view class="modal-dialog date-picker" @click.stop>
        <view class="modal-title">选择购买日期</view>
        <view class="date-picker-content">
          <picker 
            mode="date" 
            start="2018-01-01" 
            :end="today"
            :value="deviceForm.purchaseDate"
            @change="onDateChange"
          >
            <view class="picker-view">
              {{ deviceForm.purchaseDate || '请选择日期' }}
            </view>
          </picker>
        </view>
        <view class="date-picker-buttons">
          <button class="picker-btn cancel" @click="showPurchaseDate = false">取消</button>
          <button class="picker-btn confirm" @click="showPurchaseDate = false">确定</button>
        </view>
      </view>
    </view>

    <!-- 城市选择弹窗 -->
    <view class="modal-overlay" v-if="showCityPicker" @click="showCityPicker = false">
      <view class="modal-dialog city-picker" @click.stop>
        <view class="modal-title">选择所在城市</view>
        <view class="city-picker-content">
          <picker 
            mode="multiSelector"
            :range="cityList"
            @change="onCityChange"
            @columnchange="onCityColumnChange"
          >
            <view class="picker-view">
              {{ contactForm.city || '请选择城市' }}
            </view>
          </picker>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 步骤配置
      steps: ['设备信息', '故障描述', '联系信息'],
      currentStep: 0,
      
      // 设备型号列表
      deviceModels: [
        { label: 'DJI Mini 3 Pro', value: 'mini3pro' },
        { label: 'DJI Air 3', value: 'air3' },
        { label: 'DJI Mavic 3', value: 'mavic3' },
        { label: 'DJI Mini 4 Pro', value: 'mini4pro' },
        { label: 'DJI Air 2S', value: 'air2s' },
        { label: 'DJI FPV', value: 'fpv' },
        { label: '其他型号', value: 'other' }
      ],
      
      // 故障类型
      faultTypes: [
        { label: '无法起飞', value: 'takeoff' },
        { label: '云台故障', value: 'gimbal' },
        { label: '电池问题', value: 'battery' },
        { label: '电机异响', value: 'motor' },
        { label: '信号问题', value: 'signal' },
        { label: '镜头故障', value: 'camera' },
        { label: '外观损坏', value: 'appearance' },
        { label: '其他故障', value: 'other' }
      ],
      
      // 城市数据
      cityList: [
        ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京'],
        ['东城区', '西城区', '朝阳区', '海淀区', '丰台区', '石景山区']
      ],
      cityIndex: [0, 0],
      
      // 表单数据
      deviceForm: {
        model: '',
        purchaseDate: '',
        inWarranty: 'true',
        serialNumber: ''
      },
      
      faultForm: {
        faultType: [],
        description: '',
        images: []
      },
      
      contactForm: {
        name: '',
        phone: '',
        city: '',
        address: '',
        serviceType: 'mail'
      },
      
      // 弹窗控制
      showModelSelect: false,
      showPurchaseDate: false,
      showCityPicker: false,
      
      // 生成的订单号
      orderNumber: '',
      
      // 今天日期
      today: ''
    };
  },
  
  onLoad() {
    // 设置今天日期
    const date = new Date();
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    this.today = `${year}-${month}-${day}`;
  },
  
  methods: {
    // 切换故障类型选择
    toggleFaultType(value) {
      const index = this.faultForm.faultType.indexOf(value);
      if (index > -1) {
        this.faultForm.faultType.splice(index, 1);
      } else {
        this.faultForm.faultType.push(value);
      }
    },
    
    // 选择设备型号
    selectModel(model) {
      this.deviceForm.model = model.label;
      this.showModelSelect = false;
    },
    
    // 日期选择变化
    onDateChange(e) {
      this.deviceForm.purchaseDate = e.detail.value;
    },
    
    // 城市选择变化
    onCityChange(e) {
      const val = e.detail.value;
      this.cityIndex = val;
      this.contactForm.city = `${this.cityList[0][val[0]]} ${this.cityList[1][val[1]]}`;
    },
    
    // 城市列变化
    onCityColumnChange(e) {
      // 可以根据第一列选择动态加载第二列数据
    },
    
    // 选择图片
    chooseImage() {
      const maxCount = 5 - this.faultForm.images.length;
      if (maxCount <= 0) return;
      
      uni.chooseImage({
        count: maxCount,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.faultForm.images = this.faultForm.images.concat(res.tempFilePaths);
        }
      });
    },
    
    // 删除图片
    removeImage(index) {
      this.faultForm.images.splice(index, 1);
    },
    
    // 验证当前步骤
    validateCurrentStep() {
      if (this.currentStep === 0) {
        if (!this.deviceForm.model) {
          this.showToast('请选择设备型号');
          return false;
        }
        if (!this.deviceForm.purchaseDate) {
          this.showToast('请选择购买时间');
          return false;
        }
        if (!this.deviceForm.serialNumber) {
          this.showToast('请输入设备序列号');
          return false;
        }
        return true;
      } else if (this.currentStep === 1) {
        if (this.faultForm.faultType.length === 0) {
          this.showToast('请选择至少一种故障类型');
          return false;
        }
        if (!this.faultForm.description || this.faultForm.description.length < 10) {
          this.showToast('请详细描述故障情况，至少10个字符');
          return false;
        }
        return true;
      } else if (this.currentStep === 2) {
        if (!this.contactForm.name) {
          this.showToast('请输入联系人姓名');
          return false;
        }
        if (!this.contactForm.phone || !/^1[3-9]\d{9}$/.test(this.contactForm.phone)) {
          this.showToast('请输入正确的手机号码');
          return false;
        }
        if (!this.contactForm.city) {
          this.showToast('请选择所在城市');
          return false;
        }
        if (!this.contactForm.address) {
          this.showToast('请输入详细地址');
          return false;
        }
        return true;
      }
      return true;
    },
    
    // 下一步
    nextStep() {
      if (!this.validateCurrentStep()) {
        return;
      }
      
      if (this.currentStep < 2) {
        this.currentStep++;
        this.scrollToTop();
      } else {
        // 提交表单
        this.submitForm();
      }
    },
    
    // 上一步
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
        this.scrollToTop();
      }
    },
    
    // 提交表单
    submitForm() {
      uni.showLoading({ title: '提交中...' });
      
      // 模拟表单提交
      setTimeout(() => {
        uni.hideLoading();
        // 生成订单号
        this.orderNumber = 'DR' + new Date().getTime().toString().slice(-8);
        this.currentStep = 3;
      }, 1500);
    },
    
    // 滚动到顶部
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    
    // 显示提示
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2000
      });
    },
    
    // 返回上一页
    navigateBack() {
      if (this.currentStep > 0) {
        this.prevStep();
      } else {
        uni.navigateBack();
      }
    },
    
    // 返回首页
    navigateToHome() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    
    // 查看订单
    navigateToOrder() {
      uni.navigateTo({
        url: '/pages/repair/index'
      });
    },
    
    // 显示帮助提示
    showHelpTips() {
      uni.showModal({
        title: '维修申请帮助',
        content: '请准确填写设备信息和故障描述，上传清晰的故障照片，我们将尽快为您安排维修服务。',
        showCancel: false
      });
    }
  }
};
</script>

<style scoped>
/* 样式与之前保持一致 */
.repair-apply-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  background: linear-gradient(135deg, #1E40AF, #3B82F6);
  color: #fff;
  position: relative;
}

.navbar::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  transform: scaleY(0.5);
}

.navbar-left, .navbar-right {
  width: 60rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 500;
}

.icon-arrow-left, .icon-help {
  font-size: 36rpx;
}

/* 进度指示器 */
.progress-container {
  padding: 30rpx 24rpx 10rpx;
  background-color: #fff;
}

.progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  width: 33.333%;
}

.step-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  background-color: #F2F3F5;
  color: #909399;
  font-size: 28rpx;
  font-weight: bold;
}

.progress-step.active .step-icon {
  background-color: #ECF2FF;
  border: 2rpx solid #367AF6;
  color: #367AF6;
}

.progress-step.completed .step-icon {
  background-color: #367AF6;
  color: #fff;
}

.step-text {
  font-size: 24rpx;
  color: #909399;
}

.progress-step.active .step-text,
.progress-step.completed .step-text {
  color: #367AF6;
  font-weight: 500;
}

.step-line {
  flex: 1;
  height: 4rpx;
  background-color: #E5E6EB;
  position: absolute;
  top: 28rpx;
  width: 33.333%;
  z-index: 1;
}

.step-line.completed {
  background-color: #367AF6;
}

/* 表单卡片 */
.form-card {
  margin: 24rpx;
  border-radius: 20rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.form-steps-container {
  display: flex;
  overflow: hidden;
}

.form-step {
  width: 100%;
  flex-shrink: 0;
  min-height: 500rpx;
  padding: 10rpx;
}

.success-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 20rpx;
  text-align: center;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #E8F7EF;
  color: #00B42A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  margin-bottom: 40rpx;
  animation: bounce 0.6s;
}

.success-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 20rpx;
}

.success-desc {
  font-size: 28rpx;
  color: #367AF6;
  margin-bottom: 20rpx;
  padding: 0 40rpx;
}

.success-info {
  font-size: 26rpx;
  color: #86909C;
  margin-bottom: 60rpx;
  line-height: 1.6;
  padding: 0 40rpx;
}

.success-buttons {
  display: flex;
  flex-direction: column;
  width: 80%;
  gap: 20rpx;
}

.success-btn {
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border-radius: 16rpx;
  border: none;
  font-weight: 500;
}

.success-btn.primary {
  background-color: #367AF6;
  color: #fff;
}

.success-btn.secondary {
  background-color: #ECF2FF;
  color: #367AF6;
}

/* 表单内容 */
.form-content {
  padding: 30rpx 20rpx;
}

.form-item {
  display: flex;
  margin-bottom: 30rpx;
  padding-bottom: 30rpx;
  border-bottom: 1px solid #F2F3F5;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  width: 180rpx;
  font-size: 28rpx;
  color: #1D2129;
  display: flex;
  align-items: center;
}

.form-control {
  flex: 1;
}

/* 输入框样式 */
.text-input {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #1D2129;
  padding: 0 10rpx;
}

.text-input::placeholder {
  color: #C9CDD4;
}

.textarea-input {
  width: 100%;
  font-size: 28rpx;
  color: #1D2129;
  padding: 15rpx 10rpx;
  border: 1px solid #E5E6EB;
  border-radius: 8rpx;
  min-height: 160rpx;
}

.textarea-input::placeholder {
  color: #C9CDD4;
}

/* 选择框样式 */
.select-input {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #1D2129;
  padding: 0 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.select-arrow {
  color: #C9CDD4;
  font-size: 24rpx;
}

/* 单选框样式 */
.radio-group {
  display: flex;
  align-items: center;
  gap: 40rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  cursor: pointer;
}

.radio-circle {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 2rpx solid #C9CDD4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-item.checked .radio-circle {
  border-color: #367AF6;
}

.radio-item.checked .radio-circle::after {
  content: '';
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #367AF6;
}

.radio-text {
  font-size: 28rpx;
  color: #1D2129;
}

/* 复选框样式 */
.checkbox-group {
  padding-top: 5rpx;
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  width: 48%;
  margin-bottom: 10rpx;
  cursor: pointer;
}

.checkbox-icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 6rpx;
  border: 2rpx solid #C9CDD4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 20rpx;
  font-weight: bold;
}

.checkbox-item.checked .checkbox-icon {
  background-color: #367AF6;
  border-color: #367AF6;
  color: #fff;
}

.checkbox-text {
  font-size: 26rpx;
  color: #1D2129;
}

/* 上传组件样式 */
.upload-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 10rpx;
}

.upload-add {
  width: 120rpx;
  height: 120rpx;
  border: 2rpx dashed #DDDFE1;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-plus {
  font-size: 40rpx;
  color: #909399;
}

.upload-item {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  position: relative;
  overflow: hidden;
}

.upload-img {
  width: 100%;
  height: 100%;
  display: block;
}

.upload-remove {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

/* 表单提示 */
.form-hint {
  font-size: 22rpx;
  color: #86909C;
  margin-top: 8rpx;
  display: block;
}

/* 操作按钮 */
.form-actions {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 24rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.action-btn {
  width: 48%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border-radius: 16rpx;
  border: none;
  font-weight: 500;
}

.prev-btn {
  background-color: #F2F3F5;
  color: #606266;
}

.next-btn {
  background-color: #367AF6;
  color: #fff;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}

.modal-dialog {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-title {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #1D2129;
  border-bottom: 1px solid #F2F3F5;
}

.modal-content {
  padding: 20rpx;
}

.modal-item {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  border-bottom: 1px solid #F2F3F5;
}

.modal-item:last-child {
  border-bottom: none;
}

/* 日期选择器 */
.date-picker {
  display: flex;
  flex-direction: column;
}

.date-picker-content {
  padding: 30rpx;
}

.picker-view {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
  color: #1D2129;
}

.date-picker-buttons {
  display: flex;
  height: 90rpx;
  border-top: 1px solid #F2F3F5;
}

.picker-btn {
  flex: 1;
  height: 100%;
  line-height: 90rpx;
  border: none;
  font-size: 30rpx;
  background-color: transparent;
}

.picker-btn.cancel {
  color: #606266;
}

.picker-btn.confirm {
  color: #367AF6;
}

/* 城市选择器 */
.city-picker {
  max-height: 60vh;
}

.city-picker-content {
  padding: 20rpx 0;
}

/* 动画 */
@keyframes bounce {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* 占位符样式 */
.placeholder {
  color: #C9CDD4;
}
</style>
